<template>
    <div id='CardItem' class='card_item' :style="{'--contentHeight':cardHeight-48+'px','--cardwidth':cardwidth}">
        <div class="header">
            <div class="left">
                <div class="label">{{content.sort}}</div>
                <span>{{content.name}}</span>
            </div>
            <div class="right">
                <span>{{content.time}}</span>
            </div>
        </div>
        <div class="content">
            <div class="title">{{content.title}}</div>
            <div class="view">{{content.value}}</div>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['content', 'index', 'cardHeight', 'cardwidth'],
    data() {
        return {
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {},
    watch: {}
}
</script>
<style lang='less' scoped>
@contentPadding: 20px;
@leftLabelSize: 26px;
.card_item {
    // display: flex;
    width: 100%;
    height: 100%;
    .header {
        width: var(--cardwidth);
        display: flex;
        padding: 0 @contentPadding;
        height: 48px;
        border-bottom: 1px solid #eef0f5;
        .left {
            width: 50%;
            display: flex;
            align-items: center;
            .label {
                width: @leftLabelSize;
                height: @leftLabelSize;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #2d8cf0;
                opacity: 1;
                color: #fff;
                border: 1px solid #2d8cf0;
            }
            span {
                font-size: 16px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #17233d;
                margin-left: 10px;
            }
        }
        .right {
            width: 50%;
            display: flex;
            justify-content: end;
            align-items: center;
            span {
                font-size: 16px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #9ea7b4;
            }
        }
    }
    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: var(--contentHeight);
        padding: @contentPadding;
        .title {
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #abafb7;
        }
        .view {
            font-size: 16px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #464c5b;
        }
    }
}
</style>